<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">修改 obj.hobby.eat</button>
</template>

<script>
import { watch, ref } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    // 监听 ref 类型是数据，默认并没有开启深度监听
    watch(
      obj,
      (newValue, oldValue) => {
        // !监听的是对象的话，新旧值是相等的
        console.log(newValue === oldValue)
      },
      {
        deep: true,
      }
    )

    return { obj }
  },
}
</script>
